<template>
	<div class="wrapper">
			<div class="back-icon" @click="goBack()">
				<i class="fa fa-arrow-left"></i>
			</div>
			<!-- header部分 -->
			<header>
				<p>商品管理</p>
			</header>
			
			<!-- 商家logo部分 -->
			<div class="business-logo">
				<img :src="business.businessImg">
			</div>
			<div class="business-info">
				<h1>{{business.businessName}}</h1>
				<p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
				<p>{{business.businessExplain}}</p>
			</div>
			<div class="add-food-button">
				<button @click="tocreate(businessId)">新建商品</button>
			</div>
			<ul class="food">
				<li v-for="(item,index) in foodArr">
					<div class="food-left">
						<img :src="item.foodImg">
						<div class="food-left-info">
							<h3>{{item.foodName}}</h3>
							<p>{{item.foodExplain}}</p>
							<p>&#165;{{item.foodPrice}}</p>
						</div>
					</div>
					<div class="fodd-actions">
						<button class="fooddelete" @click="todelete(item.foodId)">删除</button>
						<button class="foodchange" @click="tochange(item.foodId)">编辑</button>
					</div>
				</li>
			</ul>
			
			<!--底部菜单部分-->
			<MsFooter></MsFooter>
	</div>
</template>

<script>
	import {useRouter} from 'vue-router'
	import {useRoute} from 'vue-router'
	import {ref,onMounted,getCurrentInstance, reactive} from 'vue';
	import MsFooter from '@/components/MsFooter.vue'
	export default{
		name:'Goods',
		data(){
			return {
				businessId: this.$route.query.businessId,
				business:{},
				foodArr:[],
				user:{},
				isCartExpanded: false, // 购物车是否展开
        		selectedItems: [],     // 已选商品
			}
		},
		
		created() {
			this.user = this.$getSessionStorage('user');
			console.log(this.user);
			//根据businessId查询商家信息
			this.$axios.post('BusinessController/getBusinessById',this.$qs.stringify({
				businessId:this.user.userId
			})).then(response=>{
				this.business = response.data;
			}).catch(error=>{
				console.error(error);
			});
			
			//根据businessId查询所属食品信息
			this.$axios.post('FoodController/listFoodByBusinessId',this.$qs.stringify({
				businessId:this.user.userId
			})).then(response=>{
				this.foodArr = response.data;
			}).catch(error=>{
				console.error(error);
			});
		},
		components:{
			MsFooter
		},
		methods:{			
			todelete(foodId){
				this.$axios.post('FoodController/delFoodById',this.$qs.stringify({
					foodId: foodId,
					businessId:this.user.userId
				})).then(response=>{
					alert ("删除成功！");
					/*if(response.data.code=='200'){
						alert("删除成功!");
					}else{
						alert("删除失败！");
					}*/
					window.location.reload(true);
				}).catch(error=>{
					console.error(error);
				});
			},
			tochange(foodId){
				this.$router.push({name:'FoodChangeVue',params:{foodId:foodId}});
			},
			tocreate(businessId){
				this.$router.push({path:'/foodCreate',query:{businessId:businessId}});
			}
		},
	}
</script>

<style scoped>
    /* 总容器 */
    .wrapper {
        min-height: 150vh;
        display: flex;
        flex-direction: column;
    }
    .content {
        flex: 1;
        padding-bottom: 14vw; /* 设置与 footer 高度相同的底部内边距 */
    }
    
    /* Header部分 */
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;
        
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* 商家Logo部分 */
    .wrapper .business-logo {
        width: 100%;
        height: 35vw;
        margin-top: 12vw;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wrapper .business-logo img {
        width: 40vw;
        height: 30vw;
        border-radius: 5px;
    }
    
    /* 商家信息部分 */
    .wrapper .business-info {
        width: 100%;
        height: 20vw;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .wrapper .business-info h1 {
        font-size: 5vw;
    }
    .wrapper .business-info p {
        font-size: 3vw;
        color: #666;
        margin-top: 1vw;
    }
    
   /* 添加食品按钮 */
   .add-food-button {
       margin-top: 2vw;
       padding: 1vw;
       display: flex;
       justify-content: center;
   }
   
   .add-food-button button {
       display: flex; /* 使用弹性布局 */
       align-items: center; /* 垂直居中 */
       justify-content: center; /* 水平居中 */
       padding: 1vw 2vw;
       font-size: 4vw;
       background-color: #0097FF;
       color: white;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       transition: all 0.3s ease; /* 添加过渡效果 */
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
   }
   
   /* 悬停效果 */
   .add-food-button button:hover {
       background-color: #0074cc;
       transform: translateY(-2px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   }
    
    /* 商品列表 */
    .wrapper .food {
        width: 100%;
        margin-bottom: 14vw;
        padding-bottom: 6vw;
		margin-bottom: 14vw;
    }
    .wrapper .food li {
        width: 100%;
        box-sizing: border-box;
        padding: 2.5vw;
        user-select: none;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wrapper .food li .food-left {
        display: flex;
        align-items: center;
    }
    .wrapper .food li .food-left img {
        width: 20vw;
        height: 20vw;
    }
    .wrapper .food li .food-left .food-left-info {
        margin-left: 3vw;
    }
    .wrapper .food li .food-left .food-left-info h3 {
        font-size: 3.8vw;
        color: #555;
    }
    .wrapper .food li .food-left .food-left-info p {
        font-size: 3vw;
        color: #888;
        margin-top: 2vw;
    }
    .wrapper .food li .food-right {
        width: 16vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* 定义一个包裹删除和编辑按钮的容器 */
    .food-actions {
        display: flex; /* 使用 Flexbox */
        flex-direction: column; /* 子元素垂直排列 */
        align-items: flex-end; /* 子元素靠右对齐 */
    }
    
    /* 删除和编辑按钮 */
    .fooddelete, .foodchange {
        width: 10vw;
        height: 5vw;
        font-size: 3vw;
        background-color: #0097FF;
        color: white; /* 文本颜色为白色以便于阅读 */
        border: none; /* 移除边框 */
        border-radius: 5px; /* 添加圆角 */
        margin: 0.5vw 0; /* 上下间距以避免按钮之间重叠 */
        display: flex; /* 使用 Flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        cursor: pointer;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影 */
        transition: all 0.3s ease; /* 添加过渡效果 */
    }
    
    /* 悬停状态 */
    .fooddelete:hover, .foodchange:hover {
        background-color: #0078d7; /* 悬停时改变背景色 */
    }
</style>